<template>
	<view class="page" loading>
		<view class="heads flex row-between" @click="person">
			<view class="flex col-center">
				<image class="avatar" :src="msg.avatar" mode=""></image>
				<view>
					<view class="name m-b-8">{{msg.real_name?msg.real_name:msg.nickname}}</view>
					<view>手机号：{{msg.mobile?msg.mobile:msg.account}}</view>
				</view>
			</view>
			<u-icon name="arrow-right" color="#ffffff" size="16"></u-icon>
		</view>

		<view class="boxes">
			<view class="box flex" v-for="(item, index) in list" :key="index" @click="click(index)">
				<image :src="item.img" mode=""></image>
				<view>{{ item.name }}</view>
				<view class="m-l-60" v-if="item.name == '实名认证'">
					<view v-if="ifshiming == 1">已认证</view>
					<view v-else>未认证</view>
				</view>
			</view>
		</view>
		 <!-- @close="close" -->
		<u-popup :show="show" mode="center">
			<view class="popup">
				<view class="text-center m-b-30 bold font-size-32">实名认证</view>

				<u-radio-group placement="row" v-model="radioChooseName">
					<u-radio
						:customStyle="{ marginRight: '30rpx' }"
						v-for="(item, index) in radiolist"
						:key="index"
						:label="item.name"
						:name="item.name"
						@change="radioChange(index,item.name)"
					></u-radio>
				</u-radio-group>
				<view class="m-t-20 m-b-20">真实姓名<text style="color: red">*</text></view>
				<u--input placeholder="请输入姓名" type="name" border="surround" v-model="name"></u--input>
				
				<view class="m-t-20 m-b-20">手机号<text style="color: red">*</text></view>
				<u--input placeholder="请输入手机号" type="number" border="surround" v-model="phone"></u--input>
				
				<view class="m-t-20 m-b-20">
					身份证上传
					<text style="color: red">*</text>
				</view>
				<view class="addimg flex col-center">
					<image class="m-r-40" @click="upload(1)" v-if="!img1" src="../../static/images/add.png" mode=""></image>
					<image class="m-r-40" @click="upload(1)" v-else :src="img1" mode=""></image>
					<image @click="upload(2)" v-if="!img2" src="../../static/images/add.png" mode=""></image>
					<image @click="upload(2)" v-else :src="img2" mode=""></image>
				</view>

				<view v-if="active==2 || active==3">
					<view v-if="active == 3">
						<view class="m-t-20" @click="checked = !checked">
							<radio class="radio" :size="15" :checked="checked" />
							国道护送
						</view>
						<view class="m-t-20" @click="checked2 = !checked2">
							<radio class="radio" :size="15" :checked="checked2" />
							高速护送
						</view>
					</view>

					<view class="m-t-20 m-b-20">
						服务区域
						<text style="color: red">*</text>
					</view>
					<view class="regionclick" @click="regionclick">
						<view class="zhan"></view>
						<u--input placeholder="请选择省市区" border="surround" v-model="region"></u--input>
					</view>
					<mpvue-city-picker
						:areashow="false"
						:themeColor="themeColor"
						ref="mpvueCityPicker"
						:pickerValueDefault="cityPickerValueDefault"
						@onCancel="onCancel"
						@onConfirm="onConfirm"
					></mpvue-city-picker>

					<view class="m-t-20 m-b-20">服务内容</view>
					<u--input placeholder="请输入服务内容" border="surround" v-model="message"></u--input>
				</view>

				<view class="m-t-50" @click="submit">
					<u-button shape="circle" type="primary" text="确认提交"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- <u-loading-page :loading="loading"></u-loading-page> -->
	</view>
</template>

<script>
const app = getApp();
import { uploadFile } from '@/utils/tools';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import config from "@/config/index.js";
const imgUrl = config.imgUrl;
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			msg:{
				avatar:'../../static/mains/avatar.png',
				nickname:'姓名',
				account:'***********',
			},
			active: 1, //1驾驶员  2 代办  3 大件
			list: [
				{ name: '实名认证', img: '../../static/mains/a1.png' },
				// { name: '我的订单', img: '../../static/mains/a2.png' },
				// { name: '服务评价', img: '../../static/mains/a3.png' },
				{ name: '投诉救助建议', img: '../../static/mains/a4.png' },
				{ name: '会员费用', img: '../../static/mains/a5.png' },
				// {name:'保证金缴纳',img:'../../static/mains/a6.png'},
				{ name: '我的分销', img: '../../static/mains/a7.png' },
				{ name: '我的积分', img: '../../static/mains/a8.png' }
			],
			ifshiming: app.globalData.ifshiming,

			loading: true,

			show: false, //弹出层
			radiolist: [
				{
					name: '办证人员',
					disabled: false
				},
				{
					name: '大件护送',
					disabled: false
				},
				{
					name: '驾驶员',
					disabled: false
				}
			],
			radioChoose: '',
			radioChooseName: '',
			name: '',
			phone: '',
			
			img1: '',
			img2: '',

			checked: false,
			checked2: false,

			cityPickerValueDefault: [0, 0, 1],
			themeColor: '#007AFF',
			region: '',
			shengId: '',
			shiId: '',
			quId: '',

			message: ''
		};
	},
	onShow() {
		if(uni.getStorageSync('token')&&!this.show){
			this.getcenter();
		}
	},
	onLoad() {
		
	},
	methods: {
		async getcenter(){
			let res = await this.$api.center();
			if (res.code == 1) {
				// console.log(res.data);
				this.msg = res.data;
				app.globalData.active = res.data.role;
				this.active = res.data.role;
				if(this.active != 1){
					this.list[2].name = '保证金缴纳';
					this.list[2].img = '../../static/mains/a6.png';
				}
				app.globalData.ifshiming = res.data.is_ok;//是否实名
				this.ifshiming = res.data.is_ok;
				if(res.data.is_ok!=1){
					this.show = true;
				}
			
				if(app.globalData.vip_open==1){
					app.globalData.is_vip = res.data.is_vip;
				}else{
					app.globalData.is_vip = 1;
				}
			}
		},
		person(){
			if(!uni.getStorageSync('token')){
				this.$modal({
					title:'您还未登录!',
					msg:'去登录',
					url:'/pages/login/login'
				})
				return
			}
			uni.navigateTo({
				url:'/pages/main/person/person'
			})
		},
		click(e) {
			if(!uni.getStorageSync('token')){
				this.$modal({
					title:'您还未登录!',
					msg:'去登录',
					url:'/pages/login/login'
				})
				return
			}
			if (e == 1) {
				uni.navigateTo({
					url:'/pages/main/recommend/recommend'
				})
			} else if (e == 2) {
				if(this.active==1){//驾驶员会员费
					uni.navigateTo({
						url:'/pages/main/member/member?isvip='+this.msg.is_vip+'&paymoney='+this.msg.vip_price
					})
				}else{//其他保证金
					uni.navigateTo({
						url:'/pages/main/margin/margin?items='+encodeURIComponent(JSON.stringify(this.msg.service))
					})
				}
			} else if (e == 3) {
				uni.navigateTo({
					url:'/pages/main/retail/retail?integral='+this.msg.integral+'&tj_num='+this.msg.tj_num
				})
			} else if (e == 4) {
				uni.navigateTo({
					url:'/pages/main/retail/jifen'
				})
			}
		},

		// 单选
		radioChange(n,name) {
			// console.log('radioChange', n);
			switch (n) {
				case 0:
					this.active = 2;
					break;
				case 1:
					this.active = 3;
					break;
				case 2:
					this.active = 1;
					break;
			}
			this.radioChoose = this.active;
			this.radioChooseName = name;
			console.log('radioChoose', this.radioChoose);
		},

		// 上传
		async upload(num) {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function (res) {
					let files = res.tempFilePaths[0];
					uni.showLoading();
					uploadFile(files, {
						// #ifdef MP-WEIXIN
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}
						// #endif
					})
						.then((res) => {
							uni.hideLoading();
							if (num == 1) {
								that.img1 = res.uri;
							} else {
								that.img2 = res.uri;
							}
							console.log(res);
						})
						.catch(() => {
							uni.hideLoading();
							that.$toast({
								title: '上传失败,请重新上传!'
							})
						});
				}
			});
		},

		// 是否
		changevalue(n) {
			console.log('===>', n);
		},

		// 三级联动选择
		regionclick() {
			this.$refs.mpvueCityPicker.show();
		},
		onConfirm(e) {
			let pickerText = JSON.stringify(e.label).replace(/\"/g, '');
			let shengName = String(pickerText).split('-')[0];
			let shiName = String(pickerText).split('-')[1];
			// let quName = String(pickerText).split('-')[2];
			this.region = shengName + ' ' + shiName;
			let dataId = JSON.stringify(e.cityCode).replace(/\"/g, '');
			this.shengId = dataId.substring(0, 2) + '0000';
			this.shiId = dataId.substring(0, 4) + '00';
			// this.quId = dataId;
		},

		async submit() {
			let that = this;
			let img1 = '';
			let img2 = '';
			let checked = 0;
			let checked2 = 0;
			if(!this.radioChoose) return this.$toast({
				title: '请选择身份'
			})
			if(!this.name) return this.$toast({
				title: '请填写姓名'
			})
			if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$toast({
				title: '手机号格式不正确'
			})
			if(!this.img1) return this.$toast({
				title: '请上传身份证'
			})
			if(!this.img2) return this.$toast({
				title: '请上传身份证'
			})
			img1 = this.img1.split(imgUrl)[1];
			img2 = this.img2.split(imgUrl)[1];
			
			if(this.active == 3){
				if(!this.checked && !this.checked2) return this.$toast({
					title: '请选择护送类型'
				})
				if(this.checked){checked = 1};
				if(this.checked2){checked2=1};
			}
			if(this.active != 1){
				if(!this.shengId||!this.shiId) return this.$toast({
					title: '请选择服务地点'
				})
			}
			let params = {};
			if(this.active==1){
				params = {
					role:this.radioChoose,
					real_name:this.name,
					mobile:this.phone,
					cardimg:img1,
					cardimg2:img2
				}
			}else if(this.active==3){
				params = {
					role:this.radioChoose,
					real_name:this.name,
					mobile:this.phone,
					cardimg:img1,
					cardimg2:img2,
					guodao:checked,
					gaosu:checked2,
					province:this.shengId,
					city:this.shiId,
					content:this.message
				}
			}else if(this.active==2){
				params = {
					role:this.radioChoose,
					real_name:this.name,
					mobile:this.phone,
					cardimg:img1,
					cardimg2:img2,
					guodao:checked,
					gaosu:checked2,
					province:this.shengId,
					city:this.shiId,
					content:this.message
				}
			}
			let res = await this.$api.realName(params);
			if (res.code == 1) {
				that.show = false;
				await that.getcenter();
				if(app.globalData.is_vip==0){
					that.$nextTick(() => {
						that.click(2)
					});
				}
				
			}
		}
	}
};
</script>

<style scoped lang="scss">
.page {
	.popup {
		padding: 30rpx;

		.addimg {
			image {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.radio {
			transform: scale(0.8);
		}

		.regionclick {
			position: relative;
			.zhan {
				position: absolute;
				z-index: 999;
				width: 100%;
				height: 100%;
			}
		}
	}
	.heads {
		background: #4076c5;
		font-size: 26rpx;
		color: #fff;
		padding: 20rpx 50rpx 25rpx 36rpx;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 40rpx;
		}
		.name {
			font-size: 36rpx;
		}
	}
	.boxes {
		padding: 0 30rpx;

		.box {
			padding: 28rpx 0;
			border-bottom: 1px solid #ececec;
			font-size: 32rpx;
			color: #000000;
			.m-l-60 {
				color: #474747;
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
